<template>
  <basic-container>
    <div id="binding">
      <h3>酒店绑定</h3>
      <div class="chart_box">
        <div class="hotel">
          <div class="hotel_new">
            <avue-crud
              ref="crud"
              :data="
                tableData.slice(
                  (page.pageNum - 1) * page.pageSize,
                  page.pageNum * page.pageSize
                )
              "
              :option="option"
              :page.sync="page"
              @on-load="onLoad"
              @current-row-change="UsedhandleCurrentRowChange"
            >
            </avue-crud>
          </div>
          <el-button
            type="primary"
            size="small"
            style="margin-bottom: 5px; height: 30px"
            @click="exchange"
            >交换</el-button
          >
          <div class="hotel_used">
            <avue-crud
              ref="crud"
              :data="
                NewNumber.slice(
                  (Newpage.pageNum - 1) * Newpage.pageSize,
                  Newpage.pageNum * Newpage.pageSize
                )
              "
              :option="Newoption"
              :page="Newpage"
              @on-load="NewonLoad"
              @current-row-change="NewhandleCurrentRowChange"
            >
            </avue-crud>
          </div>
        </div>
        <div class="serial">
          <avue-input
            placeholder="请输入串号"
            style="width: 200px; margin-bottom: 15px"
          ></avue-input>
          <el-button
            type="primary"
            size="small"
            style="margin-bottom: 5px; height: 40px; margin-left: 15px"
            >查询</el-button
          >
          <avue-crud
            ref="crud"
            :data="
              SerialNumber.slice(
                (Serialpage.pageNum - 1) * Serialpage.pageSize,
                Serialpage.pageNum * Serialpage.pageSize
              )
            "
            :option="Serialoption"
            :page="Serialpage"
            @on-load="SerialonLoad"
          >
          </avue-crud>
        </div>
      </div>
    </div>
  </basic-container>
</template>


<script>
// let baseUrl = "http://192.168.0.220:8091"; 
let baseUrl = "http://122.51.69.142:8091"; //服务器地址
// let imageUrl = "http://192.168.0.220:8091/photos/";

export default {
  data() {
    return {
      // 原酒店
      page: {
        total: 0,
        layout: "total,pager,prev, next",
        background: false,
        pageNum: 1,
        pageSize: 10,
      },
      //新酒店
      Newpage: {
        total: 0,
        layout: "total,pager,prev, next",
        background: false,
        pageNum: 1,
        pageSize: 10,
      },
      //查询列表
      Serialpage: {
        total: 0,
        layout: "total,pager,prev, next",
        background: false,
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [], // 原酒店名
      NewNumber: [], //新酒店名
      SerialNumber: [], //查询列表
      // 原酒店
      option: {
        highlightCurrentRow: true,
        align: "center",
        menuAlign: "center",
        menu: false,
        addBtn: false,
        dialogClickModal:false,
        column: [
          {
            label: "原酒店名称",
            prop: "shopId",
            type: "select",
            dicUrl: `${baseUrl}/pc/getShopList`,
            props: {
              label: "name",
              value: "shopId",
            },
          },
        ],
      },
      //新酒店
      Newoption: {
        align: "center",
        menuAlign: "center",
        addBtn: false,
        menu: false,
        highlightCurrentRow: true,
        column: [
          {
            label: "新酒店名称",
            prop: "shopId",
            type: "select",
            dicUrl: `${baseUrl}/pc/getShopList`,
            props: {
              label: "name",
              value: "shopId",
            },
          },
        ],
      },
      //查询列表
      Serialoption: {
        align: "center",
        menuAlign: "center",
        addBtn: false,
        menu: false,
        highlightCurrentRow: true,
        column: [
          {
            label: "酒店名称",
            prop: "name",
          },
        ],
      },
      original: "", //原酒店选中
      newHotel: "", //新酒店选中
    };
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    // 进入页面加载
    getDataList() {
      let _this = this;
      _this.$ajax
        .post(`${baseUrl}/pc/getShopList`)
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200) {
            _this.tableData = resData.data;
            _this.NewNumber = resData.data;
          } else {
            _this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
    },
    // 旧酒店单选
    UsedhandleCurrentRowChange(val) {
      this.original = val.shopId;
    },
    // 新酒店单选
    NewhandleCurrentRowChange(val) {
      this.newHotel = val.shopId;
    },
    // 旧酒店列表分页
    onLoad(page) {
      this.page.pageNum = page.currentPage; //页数
    },
    // 新酒店列表分页
    NewonLoad(page) {
      this.Newpage.pageNum = page.currentPage; //页数
    },
    SerialonLoad(page) {
      this.Serialpage.pageNum = page.currentPage; //页数
    },
    exchange() {
      let _this = this;
      if (_this.original == "") {
        _this.$message.warning("请选择原酒店名称");
      } else if (_this.newHotel == "") {
        _this.$message.warning("请选择新酒店名称");
      } else {
        _this.$ajax
          .post(`${baseUrl}/pc/swapBindShop`, {
            oldShopId: _this.original,
            newShopId: _this.newHotel,
          })
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 200) {
              _this.$message.success("交换成功");
            } else {
              _this.$message.error(resData.msg);
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      }
    },
  },
};
</script>

<style lang="scss">
#binding {
  h3 {
    margin: 20px 0;
  }
  .chart_box {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-content: center;
    .hotel {
      width: 50vw;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-content: center;
      align-items: center;
      .hotel_new,
      .hotel_used {
        width: 20vw;
      }
    }
  }
  .serial {
    width: 25vw;
  }
}
</style>